<template>
  <el-container>
    <el-aside style="float:left;width: 300px;">
      <el-card class="box-card el-card-flex">
        <div slot="header" class="clearfix">
          <el-input v-model="orgNameSearch" placeholder="请搜索..." suffix-icon="el-icon-search"></el-input>
        </div>
        <div class="text item el-over-auto">
          <el-tree v-show="orgNameSearch" default-expand-all :props="orgTreeProps" :data="orgSearchDatas" @node-click="orgTreeNodeClick"
            :ref="orgNameSearch?'orgTree':''" :highlight-current="true" node-key="orgId"></el-tree>
          <el-tree :default-expanded-keys="treeExpandedKey" v-show="!orgNameSearch" :props="orgTreeProps" :load="loadOrgDatas"
            lazy @node-click="orgTreeNodeClick" :ref="!orgNameSearch?'orgTree':''" :highlight-current="true" node-key="orgId"
            :key="treeKey"></el-tree>
        </div>
      </el-card>
    </el-aside>
    <el-main style="padding:0 0 0 10px;">
      <el-card class="box-card el-card-flex">
        <div slot="header" class="clearfix">
          <span>
            <i class="el-icon-warning-outline"></i>
            流程列表
          </span>
          <el-button plain type="info" style="float: right;margin-left: 10px;" @click="cancelEvt">
            取消
            <i class="el-icon-refresh-left el-icon--right"></i>
          </el-button>
          <el-button plain type="primary" style="float: right;" @click="saveEvt">
            确定
            <i class="el-icon-document-checked el-icon--right"></i>
          </el-button>
        </div>
        <div class="text item el-over-auto" style="padding:10px 50px">
          <el-form ref="form">
            <el-form-item>
              <el-radio-group>
                <el-radio class="el-radio-large" label="1" border>备选项1</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="1" border>备选项1</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="1" border>备选项1</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="1" border>备选项1</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
                <el-radio class="el-radio-large" label="2" border>备选项2</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>
<style lang="scss">
  .el-radio.el-radio-large.is-bordered {
    width: 140px;
    height: 60px;
    padding: 0 10px;
    line-height: 59px;
    border-radius: 4px;
    margin: 0 10px 10px 0 !important;
  }
</style>
<script>
  import {
    Tree,
    MessageBox,
    Message
  } from 'element-ui';
  export default {
    components: {
      //注册插件
      'el-tree': Tree //树形菜单
    },
    watch: {
      /* 机构树搜索数据源处理 */
      orgNameSearch(val) {
        if (val) {
          let orgUrl = '/organization/search?orgName=' + val;
          this.axios.get(orgUrl).then(res => {
            let orgDatas = res.data.data;
            this.deepChild(orgDatas);
            this.orgSearchDatas = orgDatas;
          });
        } else {
          this.treeKey += 1;
        }
      }
    },
    data() {
      return {
        treeKey: 1,
        treeExpandedKey: [230], //默认展开的树形节点
        orgSearchDatas: [], //搜索返回的树形数据
        orgNameSearch: '', //根据组织名称模糊搜索
        pOrgNameSearch: '', //隶属机构搜索控制
        pOrgSearchDatas: [], //隶属机构数据源
        enableEditFlag: '', //开启form表单编辑，视图切换
        orgNewForm: {}, //新增组织数据源
        orgViewForm: {}, //修改组织数据源
        orgTypeItems: [], //机构类型（下拉）数据源
        orgDegreeItems: [], //机构等级（下拉）数据源
        //组织树默认配置
        orgTreeProps: {
          label: 'orgName',
          isLeaf: 'isLeaf'
        },
        orgDialogVisible: false, //模态框隐藏
        pOrgDialogVisible: false
      };
    },
    methods: {
      /* 保存事件 */
      saveEvt() {
        alert(123);
      },
      /* 取消事件 */
      cancelEvt() {
        this.$router.go(-1) // 后退
      },
      /* 修改组织，保存事件 */
      orgEditEvt() {
        let $this = this;
        $this.$refs.orgViewForm.validate(valid => {
          if (!valid) return false;
          let sendDatas = this.filterInvalid(this.orgViewForm); //过滤表单无效数据,保留空格
          $this.axios.post('/organization', sendDatas).then(function(res) {
            if (res.data.code != 10000) return;
            $this.enableEditFlag = false; //禁用编辑
            Message.success("修改成功"); //成功提示
            $this.orgDialogVisible = false; //关闭窗口
            //$this.loadOrgDatas($this.node, $this.resolve); //刷新树
            //$this.treeKey += 1; //刷新树
            let cData = $this.$refs.orgTree.getCurrentNode();
            Object.assign(cData, $this.orgViewForm); //重置选中的节点数据源，不刷新树
          });
        });
      },
      orgTreeNodeClick(data) {
        if (data.orgId) {
          this.axios.get(`/organization/${data.orgId}`).then(res => {
            this.setOrgViewForm(res.data.data);
          });
        } else {
          this.setOrgViewForm(data);
        }
      },
      /* 加载组织树 */
      loadOrgDatas(node, resolve) {
        this.node = node;
        this.resolve = resolve;
        if (node.level == 0) {
          let $this = this;
          let orgUrl = '/organization/root';
          this.axios.get(orgUrl).then(res => {
            let orgDatas = res.data.data;
            orgDatas.forEach(e => {
              if (e.isLeaf == 'n') {
                e.isLeaf = false;
              } else {
                e.isLeaf = true;
              }
            });
            $this.orgViewForm = JSON.parse(JSON.stringify(orgDatas[0]));
            resolve(orgDatas);
            this.$refs.orgTree.setCurrentKey(orgDatas[0].orgId);
            this.treeExpandedKey = [orgDatas[0].orgId];
          });
        } else {
          let id = node.data.orgId;
          this.axios
            .get(`/organization/parent/${id}/1/100000`)
            .then(res => {
              let orgDatas = res.data.data.records;
              orgDatas.forEach(e => {
                if (e.isLeaf == 'n') {
                  e.isLeaf = false;
                } else {
                  e.isLeaf = true;
                }
              });
              resolve(orgDatas);
            })
            .catch(res => {
              resolve([]);
            });
        }
      }
    },
    created() {

    }
  };
</script>
